<template>
  <div class="implement">
    <div class="implementHeader">
      <div class="implementHeaderTxt">
        <img :src="tabsList[0].img" />
        <span>{{ tabsList[0].title }}</span>
      </div>
      <!-- 步骤条 -->
      <StepsImplement />
    </div>
    
    <div class="implementTable">
      <div class="implementTableBtnBox">
        <a-button icon="redo" @click="$router.back()" style="margin-right: 10px;">再次配置</a-button>
        <a-button icon="to-top" type="primary" style="margin-right: 10px;">导出结果</a-button>
        <a-button icon="arrow-right" type="danger">转移点</a-button>
      </div>
      <a-table :columns="columns" :data-source="data" bordered 
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"></a-table>
    </div>
  </div>
</template>

<script>
import StepsImplement from './components/StepsImplement'
export default {
  name: 'implement',
  components: {
    StepsImplement,
  },
  data() {
    return {
      data: [
        { htje: '100', scjjrq: '2023/11/23', xmumc: '项目' }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          width: 65,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        { title: "合同金额", dataIndex: "htje", key: "htje" },
        { title: "首次计价日期", dataIndex: "scjjrq", key: "scjjrq" },
        { title: "项目名称", dataIndex: "xmumc", key: "xmumc" },
        { title: "业主单位", dataIndex: "yzdw", key: "yzdw" },
        { title: "分包企业名称", dataIndex: "fbqymc", key: "fbqymc" },
        { title: "合同号", dataIndex: "hth", key: "hth" },
      ],
      tabsList: [
        { val: 1, title: '违规签订大包合同', img: require('@/assets/new_modal/12.png') },
        { val: 2, title: '分包退场补偿', img: require('@/assets/new_modal/15.png') },
        { val: 3, title: '劳务分包补充合同占比高', img: require('@/assets/new_modal/14.png') },
        { val: 4, title: '主要物资超耗应扣未扣', img: require('@/assets/new_modal/6.png') },
        { val: 5, title: '物资招标不规范', img: require('@/assets/new_modal/13.png') },
        { val: 6, title: '物资处理类“小金库”', img: require('@/assets/new_modal/10.png') },
        { val: 7, title: '表外挂账成本复核', img: require('@/assets/new_modal/7.png') },
        { val: 8, title: '用金（大额）异常', img: require('@/assets/new_modal/8.png') },
        { val: 9, title: '拖欠农民工工资模型', img: require('@/assets/new_modal/9.png') },
        { val: 10, title: '承担缺陷整治费用', img: require('@/assets/new_modal/11.png') },
      ]
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.implementHeader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
}
.implementHeaderTxt {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 300px;
  height: 80px;
  background-color: rgba(49, 84, 164, 1);
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
  line-height: normal;
  letter-spacing: normal;
  img {
    width: 25px;
    height: 25px;
  }
}
.implementTable {
  margin-top: 15px;
  border-radius: 20px;
  background-color: #fff;
  padding: 20px;
}
.implementTableBtnBox {
  text-align: right;
  margin-bottom: 10px;
}
</style>